<!--  -->
<template>
    <view class="custom-page" :class="full && 'full-page'">
        <view
            class="h-10 flex justify-between items-center px-4 custom-title"
            :class="titleClass"
        >
            <view class="w-5"
                ><uni-icons
                    type="left"
                    v-if="showBack"
                    @click="$global.movePath('', true)"
                ></uni-icons
            ></view>
            <view>{{ title }}</view>
            <view class="w-5"></view>
        </view>
        <view class="custom-body" :class="hideConfirm && 'no-button'">
            <slot></slot>
        </view>
        <view class="h-14 px-4 py-2" v-if="!hideConfirm">
            <slot name="bottom">
                <button
                    class="size-full rounded-full leading-10"
                    :class="confirmClass"
                    @click="confirm"
                >
                    <slot name="confirm-icon">
                        <span class="iconfont" :class="icon"></span>
                    </slot>
                    {{ confirmText }}
                </button>
            </slot>
        </view>
    </view>
</template>

<script setup lang="ts">
import { $global } from "@/store";
type Props = {
    title?: string;
    titleClass?: string;
    showBack?: boolean;
    icon?: string;
    full?: boolean;
    hideConfirm?: boolean;
    confirmText?: string;
    confirmClass?: string;
};
withDefaults(defineProps<Props>(), {
    title: "",
    confirmText: "确认",
    confirmClass: "primary",
    icon: "",
    full: false,
    hideConfirm: false,
    showBack: true,
    titleClass: "bg-transparent",
});

const emit = defineEmits<{
    confirm: [e: MouseEvent];
}>();

const confirm = (e: MouseEvent) => {
    emit("confirm", e);
};
</script>
<style scoped lang="scss"></style>
